<!--
 * @Date: 2023-03-22 15:32:20
 * @LastEditTime: 2023-06-23 21:08:57

 * 介绍:
-->
<script lang="ts" setup>
import type { StyleValue } from "vue";
import { useRpullRefreshRef } from "@@/components/rework/RpullRefresh";
import { useScrollTop } from "@@/hooks/toolsHooks";
const props = defineProps<{
  pullRefresh?: boolean;
  contentStyle?: StyleValue;
}>();
const RpullRefreshRef = useRpullRefreshRef();

function pullRefreshSuccess() {
  RpullRefreshRef.value?.success();
}
function pullRefreshFail() {
  RpullRefreshRef.value?.fail();
}
function pullRefreshStart() {
  RpullRefreshRef.value?.start();
}
const emit = defineEmits<{
  (e: "refresh", v: any): void;
}>();
defineExpose({
  pullRefreshSuccess,
  pullRefreshFail,
  pullRefreshStart,
});
const scrollRef = ref<HTMLDivElement>();
useScrollTop(scrollRef);
</script>

<template>
  <div ref="scrollRef" class="CpageView">
    <RnavbarPlaceholder />
    <RpullRefresh
      class="RpullRefresh"
      @refresh="(e) => emit('refresh', e)"
      ref="RpullRefreshRef"
      :disabled="!props.pullRefresh"
    >
      <slot></slot>
      <div class="slot-bottom">
        <slot name="buttom"></slot>
      </div>
    </RpullRefresh>
  </div>
</template>

<style lang="scss" scoped>
.CpageView {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  padding: var(--gap-md);
  padding-bottom: var(--page-gap-B);
  overflow-x: visible;
  overflow-y: auto;

  background-repeat: no-repeat;
  background-size: cover;
}

.slot-bottom {
  position: fixed;
  bottom: var(--page-gap-B);
  width: var(--page-W);
}
</style>
